<template>
	<ge-page id="ge-page" :vanNavBarObj="vanNavBarObj" :safeAreaBottom="false">
		<view class="feiyi-container">
			<view class="header">
				<view class="title">非物质文化遗产</view>
				<view class="subtitle">传承中华文化，守护精神家园</view>
			</view>
			
			<van-search 
				:value="searchKeyword" 
				shape="round" 
				@search="onSearch" 
				@change="onSearchChange"
				placeholder="搜索非遗项目" 
			/>
			
			<view class="content">
				<view class="section">
					<view class="section-title">热门非遗</view>
					<view class="feiyi-list">
						<view 
							v-for="(item, index) in feiyiList" 
							:key="index" 
							class="feiyi-item"
							@click="viewDetail(item)"
						>
							<view class="item-name">{{item.name}}</view>
							<view class="item-desc">{{item.description}}</view>
							<view class="item-location">{{item.location}}</view>
						</view>
					</view>
				</view>
				
				<view class="demo-section">
					<view class="section-title">组件演示</view>
					<van-rate :value="rate" @change="rateChange" />
					<van-field 
						:value="fieldValue" 
						placeholder="请输入内容" 
						:border="false" 
						@change="fieldChange" 
					/>
					<van-picker show-toolbar title="选择地区" :columns="regions" />
					<van-button @click="showToast" type="primary">显示提示</van-button>
				</view>
			</view>
		</view>
	</ge-page>
</template>

<script>
	export default {
		data() {
			return {
				vanNavBarObj: {
					title: '非遗',
					hideLeftArrow: true
				},
				searchKeyword: '',
				rate: 4,
				fieldValue: '',
				regions: ['北京', '上海', '广州', '深圳', '杭州'],
				feiyiList: [
					{
						id: 1,
						name: '京剧',
						description: '中国传统戏曲剧种，被誉为中国国粹',
						location: '北京'
					},
					{
						id: 2,
						name: '太极拳',
						description: '中华武术的重要组成部分，内外兼修',
						location: '河北'
					},
					{
						id: 3,
						name: '书法',
						description: '汉字书写艺术，体现中华文化精神',
						location: '全国'
					},
					{
						id: 4,
						name: '剪纸',
						description: '民间传统装饰艺术，寓意吉祥',
						location: '山西'
					}
				]
			}
		},
		created() {
			console.log(uni.md5('xiaoge'))
			console.log(uni.trim('abc    b ', 'all'))
		},
		methods: {
			onSearch(e) {
				console.log('搜索:', e.detail)
				uni.toast(`搜索: ${e.detail}`)
			},
			
			onSearchChange(e) {
				this.searchKeyword = e.detail
			},
			
			viewDetail(item) {
				uni.toast(`查看 ${item.name} 详情`)
				console.log('查看详情:', item)
			},
			
			rateChange(e) {
				this.rate = e.detail
				console.log('评分变化:', e.detail)
			},
			
			fieldChange(e) {
				this.fieldValue = e.detail
				console.log('输入变化:', e.detail)
			},
			
			showToast() {
				uni.toast('这是非遗页面的提示！')
			}
		}
	}
</script>

<style lang="scss" scoped>
.feiyi-container {
	padding: 0 20px;
}

.header {
	text-align: center;
	padding: 20px 0;
	
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}
	
	.subtitle {
		font-size: 14px;
		color: #666;
	}
}

.content {
	margin-top: 20px;
}

.section {
	margin-bottom: 30px;
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		padding-bottom: 8px;
		border-bottom: 2px solid #EE0A24;
	}
}

.feiyi-list {
	.feiyi-item {
		background: #fff;
		padding: 15px;
		margin-bottom: 10px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		
		.item-name {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}
		
		.item-desc {
			font-size: 14px;
			color: #666;
			margin-bottom: 5px;
		}
		
		.item-location {
			font-size: 12px;
			color: #999;
		}
		
		&:active {
			background: #f5f5f5;
		}
	}
}

.demo-section {
	background: #f8f8f8;
	padding: 20px;
	border-radius: 8px;
	
	.section-title {
		border-bottom: 2px solid #1989fa;
	}
}
</style>
